iT邦幫忙

2025 iThome 鐵人賽

DAY 4
0

如果用車來比喻的話,html就是車體,css則是車的外觀,可以讓網頁看起來多元
CSS可以透過以下方式使用

在與html檔同一資料夾下建立一個副檔名為css的檔案

https://ithelp.ithome.com.tw/upload/images/20250918/20178696oLRydh3uBt.png
透過下面的link就可以跟css檔連結了

<link rel="stylesheet" href="你建立的css檔">

在css裡可以條html內原有標籤的樣式,就像是p,h1,h2等,而自己設定的則要在名子前加個.,如.test,後面在標籤中打上class="名稱"
id則是要在名子前加上#號
在標籤內打入style="想要的樣式內容"可以對這個標籤本身進行調整

https://ithelp.ithome.com.tw/upload/images/20250918/20178696MyEsqJmKoj.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696q33cxTBpcb.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696ehR10C0qYe.png

如果ID前的#跟class前面的.去掉會造成找不到CSS得情況
https://ithelp.ithome.com.tw/upload/images/20250918/20178696gN0Dtx9veJ.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696jwecBGcXzB.png
在CSS裡的名稱可以重複使用
https://ithelp.ithome.com.tw/upload/images/20250918/2017869697rxBHhL8z.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696NnxeqvwEPE.png

CSS也可以複數使用(background-color=背景顏色)
https://ithelp.ithome.com.tw/upload/images/20250918/201786965AtV2oCvBU.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696xbzuT1S3SQ.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696aVrkEbHDh8.png

CSS擁有的優先權的概念,在同一個元素被多個CSS選中時,哪一個項目的優先級高就會運用哪個,這個在前面也有體現到。
https://ithelp.ithome.com.tw/upload/images/20250918/20178696qniYcXpx1Q.png
現在給p加上.test的名稱
https://ithelp.ithome.com.tw/upload/images/20250918/20178696bzMvtPkdOi.png
可以看到全部都被p.test的樣式蓋過,這就是優先權
https://ithelp.ithome.com.tw/upload/images/20250918/20178696DRrie84DRU.png
將滑鼠一到CSS的名稱上可以看到他的優先權,當元素被重複選中時會先讓彼此比大小,勝出的就會顯示它的樣式。
數字的順序由左往右比,就像正常運算的百 十 個,當前面的數字比贏了後面的再大也沒有意義。

https://ithelp.ithome.com.tw/upload/images/20250918/20178696kUzDriqw5F.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696uQt8lO50f9.png
指向元素本身如:H1到H6、p等等都是最後的值
而自取的class名稱則是中間的值
https://ithelp.ithome.com.tw/upload/images/20250918/20178696HhcN7Qu7IA.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696MyAExpmoe7.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696xiNE1Gabx9.png

最大的位元則專屬於id
https://ithelp.ithome.com.tw/upload/images/20250918/20178696NuxuELVhxH.png
可以看到被多重選擇的情況下優先顯示id。
https://ithelp.ithome.com.tw/upload/images/20250918/20178696jeeVBvS7S0.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696mnlLf5O8a8.png
但是也不是只要打上id就一定會顯示,這邊介紹!imprtant,在css中!important會強制將結果顯示,不用比較優先級。
https://ithelp.ithome.com.tw/upload/images/20250918/20178696i1ihIPN9ip.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696OQAhDVjQQI.png
https://ithelp.ithome.com.tw/upload/images/20250918/20178696oFMJYIaNMq.png


上一篇
day3 html插入圖片或影片
系列文
HTML&CSS30天修煉4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言